<template>
  <div>
    <el-card class="box-card">时间分类:
      <el-input v-model="value" placeholder="请输入内容" size="mini" class="top-ipt" style="width
      :200px;"></el-input>上报日期:
      <el-date-picker v-model="value" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="mini" />
      <el-button type="primary" icon="el-icon-search" size="mini" style="margin-left:10px;">搜索</el-button>
    </el-card>
    <div id="c" :style="{width:'100%', height: '500px'}"></div>
  </div>
</template>
<script>
let echarts = require("echarts/lib/echarts");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");
import menuData from "@/assets/menu.json";
export default {
  data() {
    return {
      value: "",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      echarts.init(document.getElementById("c")).setOption({
        tooltip: {
          trigger: "item",
          triggerOn: "mousemove",
        },
        series: [
          {
            type: "tree",
            data: menuData,
            top: "1%",
            left: "7%",
            bottom: "1%",
            right: "20%",

            symbolSize: 7,

            label: {
              position: "left",
              verticalAlign: "middle",
              align: "right",
              fontSize: 9,
            },

            leaves: {
              label: {
                position: "right",
                verticalAlign: "middle",
                align: "left",
              },
            },

            emphasis: {
              focus: "descendant",
            },

            expandAndCollapse: true,
            animationDuration: 550,
            animationDurationUpdate: 750,
          },
        ],
      });
    },
  },
};
</script>
<style scoped>
body {
  background-color: #f8f9fa;
}
.box-card {
  margin: 5px;
}
.el-card /deep/ .el-card__header {
  padding: 10px 20px;
  background-color: #e2e2e2;
}
.top-ipt {
  margin-left: 5px;
}
</style>